<template>
  <div id="activity">
    <h2>{{ activity.name }}</h2>
    <div class="star">
      <img src="./image/star24_on@3x.png" alt="" />
      <img src="./image/star24_on@3x.png" alt="" />
      <img src="./image/star24_on@3x.png" alt="" />
      <img src="./image/star24_on@3x.png" alt="" />
      <img src="./image/star24_off@3x.png" alt="" />
    </div>
    <div class="title">
      <span></span>
      优惠信息
      <span></span>
    </div>

    <ul>
      <li>
          <img src="./image/decrease_2@2x.png" alt="">
          在线支付满28减5
      </li>
      <li>
          <img src="./image/discount_2@2x.png" alt="">
          VC无限橙果汁全场8折
      </li>
      <li>
          <img src="./image/discount_2@2x.png" alt="">
          单人精彩套餐
      </li>
      <li>
          <img src="./image/special_2@2x.png" alt="">
          该商家支持发票,请下单写好发票抬头
      </li>
      <li>
          <img src="./image/special_2@2x.png" alt="">
          已加入“外卖保”计划,食品安全保障
      </li>
    </ul>
    
    <div class="title">
      <span></span>
      商家公告
      <span></span>
    </div>
   
    <div class="bulletin">
        {{activity.bulletin}}
    </div>
  </div>
</template>


<script>
export default {
  props: [],
  data() {
    return {
      activity: [],
    };
  },
  methods: {},
  created() {
    this.$http.get("/data.json").then((res) => {
      console.log(res);
      this.activity = res.data.seller;
    });
  },
};
</script>


<style scoped>
#activity {
  width: 100%;
  height: 100%;
  position: relative;
  
}
h2 {
  font-size: 0.32rem;
  font-weight: 700;
  color: #fff;
  line-height: 0.32rem;
  text-align: center;
  margin-top: 0.64rem;
  margin-bottom: 0.32rem;
}
.star {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 0.72rem;
  box-sizing: border-box;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.32rem;
  font-weight: 700;
  color: #fff;
  line-height: 0.32rem;
  margin-top: 0.12rem;
}
.title span{
    display: inline-block;
  width: 2.24rem;
  height: 0.05rem;
  background: rgba(255, 255, 255, 0.5);
}
ul{
    margin-top: 0.48rem;
    margin-bottom: 0.56rem;
}
li{
    height: 0.32rem;
    line-height: 0.32rem;
    margin: 0.12rem 0.24rem;
    font-size: 0.24rem;
    color: #fff;
    display: flex;
    align-items: center;
}
li img{
    width: 0.32rem;
    margin-right: 0.12rem;
}
.bulletin{
font-size: 0.24rem;
  color: #fff;
  line-height: 0.48rem;
  padding: 0 0.24rem;
  box-sizing: border-box;
  margin-top: 0.48rem;
}

</style>